{% extends 'base/base1.html' %}
{% load static %}

{% block title %}订单详情{% endblock %}

{% block css %}
<style>
    .order-detail {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 30px;
        margin-bottom: 20px;
    }
    
    .status-badge {
        padding: 6px 15px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: bold;
    }
    
    .status-pending { background: #fff3cd; color: #856404; }
    .status-paid { background: #d4edda; color: #155724; }
    .status-shipped { background: #cce5ff; color: #004085; }
    .status-delivered { background: #d1ecf1; color: #0c5460; }
    .status-cancelled { background: #f8d7da; color: #721c24; }
    .status-refunded { background: #e2e3e5; color: #383d41; }
    
    .order-items {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .item-row {
        padding: 15px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .item-row:last-child {
        border-bottom: none;
    }
</style>
{% endblock %}

{% block main %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="order-detail">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2>订单详情</h2>
                    <span class="status-badge status-{{ order.status }}">
                        {{ order.get_status_display }}
                    </span>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <h4>订单信息</h4>
                        <table class="table table-borderless">
                            <tr>
                                <td><strong>订单号：</strong></td>
                                <td>{{ order.order_number }}</td>
                            </tr>
                            <tr>
                                <td><strong>用户：</strong></td>
                                <td>{{ order.user.username }}</td>
                            </tr>
                            <tr>
                                <td><strong>商品：</strong></td>
                                <td>{{ order.product.name }}</td>
                            </tr>
                            <tr>
                                <td><strong>单价：</strong></td>
                                <td>￥{{ order.price }}</td>
                            </tr>
                            <tr>
                                <td><strong>数量：</strong></td>
                                <td>{{ order.quantity }}</td>
                            </tr>
                            <tr>
                                <td><strong>订单金额：</strong></td>
                                <td><strong>￥{{ order.total_amount }}</strong></td>
                            </tr>
                            <tr>
                                <td><strong>创建时间：</strong></td>
                                <td>{{ order.created_at|date:"Y-m-d H:i:s" }}</td>
                            </tr>
                            <tr>
                                <td><strong>更新时间：</strong></td>
                                <td>{{ order.updated_at|date:"Y-m-d H:i:s" }}</td>
                            </tr>
                        </table>
                    </div>
                    
                    <div class="col-md-6">
                        <h4>收货信息</h4>
                        <table class="table table-borderless">
                            <tr>
                                <td><strong>收货人：</strong></td>
                                <td>{{ order.shipping_address.recipient_name }}</td>
                            </tr>
                            <tr>
                                <td><strong>联系电话：</strong></td>
                                <td>{{ order.shipping_address.phone }}</td>
                            </tr>
                            <tr>
                                <td><strong>收货地址：</strong></td>
                                <td>{{ order.shipping_address.get_full_address }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                <hr>
                
                <h4>订单商品</h4>
                <div class="order-items">
                    <div class="item-row">
                        <div class="row align-items-center">
                            <div class="col-md-3">
                                <img src="{{ order.product.img.url }}" alt="{{ order.product.name }}" 
                                     class="img-fluid" style="max-height: 100px;">
                            </div>
                            <div class="col-md-4">
                                <h5>{{ order.product.name }}</h5>
                                <p class="text-muted">SKU: {{ order.product.sku }}</p>
                                <p class="text-muted">分类: {{ order.product.category }}</p>
                            </div>
                            <div class="col-md-2 text-center">
                                <strong>单价</strong><br>￥{{ order.price }}
                            </div>
                            <div class="col-md-2 text-center">
                                <strong>数量</strong><br>x{{ order.quantity }}
                            </div>
                            <div class="col-md-1 text-right">
                                <strong>小计</strong><br>￥{{ order.total_amount }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-right mt-3">
                    <div class="border-top pt-3">
                        <h4 class="text-primary">订单总计：￥{{ order.total_amount }} <small class="text-muted">(￥{{ order.price }} x {{ order.quantity }})</small></h4>
                    </div>
                </div>
                
                <div class="mt-4">
                    <a href="{% url 'main:order_list' %}" class="btn btn-secondary">返回订单列表</a>
                    <a href="{% url 'main:order_update' order.pk %}" class="btn btn-warning">更新订单状态</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}